<template>
  <div class="h-full w-full box-container lg:items-center">
    <div class="top h-1/6 px-4 lg:px-8">
      <span @click="logout">
        <img src="/images/over.png" alt="" />
        <span class="text-xl lg:text-2xl">退出系统</span>
      </span>
      <h2 class="text-2xl lg:text-3xl font-bold lg:text-4xl">身份录入</h2>
      <span @click="toHistory">
        <span
          class="text-xl text-[#1a0dab] hover:underline decoration-[#1a0dab] lg:text-2xl"
          >历史记录</span
        >
      </span>
    </div>
    <div class="middle h-5/6 py-4 lg:h-4/6 xl:px-[10vw] 2xl:px-[20vw]">
      <div class="left w-auto lg:w-[50%] lg:justify-between">
        <div class="w-full">
          <!-- <div class="inputArea mb-4 lg:mb-8 text-base">
            <span class="text-xl  px-4 lg:px-8 lg:text-2xl font-bold text-gray-800">证件号码</span>
            <div class="line mr-4"></div>
            <input
                class="flex-grow h-[50px] lg:h-[70px] text-xl lg:text-2xl"
              type="text"
              placeholder="请输入号码"
              v-model="number"
              maxlength="18"
            />
          </div> -->
          <div class="inputArea mb-4 lg:mb-8 text-base">
            <span
              class="text-xl lg:px-8 lg:text-2xl px-4 font-bold text-gray-800"
              >姓名</span
            >
            <div class="line mr-4"></div>
            <input
              class="flex-grow h-[50px] lg:h-[70px] text-xl lg:text-2xl"
              type="text"
              placeholder="请输入姓名"
              v-model="name"
              maxlength="7"
            />
          </div>
          <div class="inputArea mb-4 lg:mb-8 text-base">
            <span
              class="text-xl lg:px-8 lg:text-2xl px-4 font-bold text-gray-800"
              >年龄</span
            >
            <div class="line mr-4"></div>
            <input
              class="flex-grow h-[50px] lg:h-[70px] text-xl lg:text-2xl"
              type="number"
              placeholder="请输入年龄"
              v-model="age"
              @input="limitInput"
            />
          </div>
          <div class="inputArea mb-4 lg:mb-8 text-base">
            <span
              class="text-xl lg:px-8 lg:text-2xl px-4 font-bold text-gray-800"
              >性别</span
            >
            <div class="line mr-4"></div>
            <!-- <input
            class="flex-grow h-[50px] lg:h-[70px] text-xl lg:text-2xl"
              type="text"
              placeholder="请输入姓名"
              v-model="name"
              maxlength="7"
            /> -->
            <div class="flex-grow h-[50px] lg:h-[70px] text-base  flex items-center">
              <!-- <div class="w-1/4 flex items-center">
                <input class="w-8 h-8" type="radio" id="zero" :value="0" v-model="sex" />
                <label for="zero" class="ml-2">未知</label>
              </div> -->
              <div class="w-1/4 flex items-center">
                <input class="w-8 h-8" type="radio" id="one" :value="1" v-model="sex" />
                <label for="one" class="ml-2">男</label>
              </div>

              <div class="w-1/4 flex items-center ml-4">
                <input  class="w-8 h-8" type="radio" id="two" :value="2" v-model="sex" />
                <label for="two" class="ml-2">女</label>
              </div>
            </div>
          </div>
          <!-- <div class="know px-2">
            <input type="checkbox" :checked="tick" @click="changeTick" />
            <p class="text-sm lg:text-lg ">
              蜀中药业深知个人信息对您的重要性，将竭力保证您的个人信息安全，我已同意并阅读
              <span
                >《蜀中药业患者服务平台隐私权政策》《蜀中药业患者服务平台用户注册协议》</span
              >
            </p>
          </div> -->
        </div>

        <button
          @click="goConfrim()"
          id="confirm"
          class="w-full h-[50px] text-2xl lg:h-[70px] lg:text-3xl"
        >
          进入检测
        </button>
      </div>
      <!-- <div class="right">
        <div class="unit" v-for="item of idcardNumberList" :key="item"><div class="number w-14 h-14 text-2xl lg:w-20 lg:h-20 lg:text-3xl" @click="add(item)">{{item}}</div></div>
        <div class="unit">
          <div class="number w-14 h-14 text-2xl lg:w-20 lg:h-20 lg:text-3xl" @click="del()">
            <img src="/images/delete.png" alt="" />
          </div>
        </div>
      </div> -->
    </div>
    <MyAlert ref="myAlert"></MyAlert>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import MyAlert from "@/components/alert/index.vue";
import { fetchStartCheck } from "@/assets/api/index.js";
const baseUrl = import.meta.env.BASE_URL;

const router = useRouter();

const number = ref("");
const age = ref();
const sex = ref(1);
const name = ref("");
const tick = ref(true);
const myAlert = ref();

const idcardNumberList = [
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "X",
  "0",
];
const limitInput = ()=> {
      if(!age.value){
        return age.value  = ''
      }
      age.value = Math.min(age.value, 120);  
    }
const add = (i) => {
  if (number.value.length >= 18) {
    return;
  }
  number.value = number.value + i;
};
const del = () => {
  let length = number.value.length;
  number.value = number.value.slice(0, length - 1);
};
const changeTick = () => {
  tick.value = !tick.value;
};
const toHistory = () => {
  router.push("/history");
};
const goConfrim = async () => {
  if (!name.value) {
    return myAlert.value.showAlert("未输入姓名");
  }
  if (!age.value) {
    return myAlert.value.showAlert("未输入年龄");
  }
  if (!sex.value && sex.value !== 0) {
    return myAlert.value.showAlert("未选择性别");
  }
  // if (!tick.value) {
  //   return myAlert.value.showAlert("未勾选用户协议");
  // }
  let res = await fetchStartCheck({
    name: name.value,
    age: age.value,
    sex: sex.value,
  });
  if (res.code !== 0) {
    myAlert.value.showAlert(res.message);
    return;
  }
  window.localStorage.setItem('tongue_res','')
  window.localStorage.setItem(
    "patientInfo",
    JSON.stringify({
      name: name.value,
      idcard: number.value,
      sex:sex.value,
      age:age.value
    })
  );
  setTimeout(() => {
    let audio = document.getElementById("myAudio");
    audio.src = baseUrl + "/sources/confirm_info.mp3";
    audio.muted = false;
    audio.play();
  }, 200);
  return router.push("/confirm-patient");
};

const logout = () => {
  myAlert.value.showAlert("确认退出系统登录吗？", true, () => {
    window.localStorage.clear();
    router.replace("/");
  });
};

onMounted(() => {
  setTimeout(() => {
    let audio = document.getElementById("myAudio");
    audio.src = baseUrl + "/sources/input_info.mp3";
    audio.muted = false;
    audio.play();
  }, 200);
});
</script>

<style scoped>
.box-container .top {
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  /* padding-right: 2rem; */
}

.top h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
}

.top > span {
  font-size: 1.5rem;
  /* color: rgb(72, 72, 247); */
  cursor: pointer;
  /* margin-right: 2.5rem; */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.top > span > img {
  width: 2rem;
  margin-right: 10px;
}
.middle {
  /* margin-top: 4rem; */
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.middle .left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  /* bottom: 3rem; */
}

.left > div .inputArea {
  width: 100%;
  border: 2px solid blue;
  border-radius: 4rem;
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  /* margin: 3rem; */
}

.inputArea input {
  background: none;
  border: none;
  outline: none;
  border: 60%;
  /* height: 3rem; */
  width: 50%;
  /* font-size: 1.25rem; */
}

/* input::placeholder {
  color: gray;
  font-size: 1.25rem;
} */

input:active {
  border: none;
  outline: none;
}

.inputArea .line {
  height: 2rem;
  width: 0.4rem;
  border-radius: 0.4rem;
  background-color: blue;
}

.left .know {
  width: 100%;
  height: auto;
  display: flex;
  /* justify-content: center; */
  align-items: flex-start;
}

.left .know input {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 1rem;
  flex-shrink: 0;
}

.left .know p {
  /* width: 80%; */
}

.left .know span {
  color: blue;
}

.middle .right {
  background: rgb(158, 157, 157);
  width: 35%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 2rem;
}

#confirm {
  margin-top: 2rem;
  cursor: pointer;

  background: linear-gradient(to right, rgb(19, 167, 255), rgb(14, 143, 255));
  /* background: blue; */
  border-radius: 200px;
  border: none;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;

  flex-shrink: 0;
}

.right .unit {
  display: flex;
  justify-content: center;
  align-items: center;
}

.right .unit .number {
  border-radius: 50%;
  background: white;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.right .unit .number:hover {
  background: rgb(218, 217, 217);
}

.number img {
  width: 2rem;
}
</style>
